<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>vue html demo</title>
    <script src="./lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 父组件可以再引用子组件的时候 通过属性绑定的形式 吧 需要传递给子组件的数据 一属性绑定 传递到子组件的内部 给他使用 -->
            <com1 v-bind:parentmsg="msg" ></com1>
        </div>
        <script>
           var vm = new Vue({
                el: '#app',
                data: {
                    msg: '父组件数据'
                },
                methods: {
                    
                },
                components: {
                    // 子组件 默认无法访问父组件的data上的数据 和methods 中的方法 
                    com1: {
                        // 子组件的data数据 不是通过父组件传递的 是子组件私有的 比如子组件 ajax 请求回来的数据 都可以放在data身上  data中的数据 是可读可写的
                        data() {
                            return {
                                content: "aaa"
                            }
                        },
                        template:'<h1 @click="change">子组件__{{ parentmsg }}</h1>',
                        // 组件中的 props 数据 都是通过 父组件传递给子组件的
                        // props的数据 都是只读的 无法重新复制 
                        props: ['parentmsg'], //吧父组件 传递过来的parentmsg 现在 props数组中 先定义一下 才能使用 这个数据 
                        methods:{
                    change() {
                        this.parentmsg = '哈哈哈'
                    }
                },
                    }

                },
               
               



            })
        </script>
    </body>
</html>